/**
 * Created by suweiming on 2017/12/30.
 */
import React from 'react';
import {StyleSheet, Linking, Dimensions} from 'react-native';
import {Form} from '../../css/form';
import {get, post, formatTime, domain, Icon, jsonToQueryStr, Feather, setFormData} from '../../lib/http';
import {
    auctionSheet,
    Fom, NoMoreData,
    View,
    fnSuccess,
    fnFail,
    Drawer,
    Container,
    Header,
    Title,
    Footer,
    Button,
    ListItem,
    Content,
    ListView,
    Left,
    FooterTab,
    Body,
    Right,
    Thumbnail, Loading,
    Text
} from '../../lib/components';
const drawerStyles = {
    drawer: {shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3},
    main: {paddingLeft: 3},
}
let {width, height} = Dimensions.get("window");


const ControlPanel = (props) => {
    const self = this;
    console.log('height=' + height);
    return <Container style={CSS.controlPanel}>
        <Header style={CSS.header}>
            <Body>
            <Title>设置查询条件</Title>
            </Body>
        </Header>
        <Content>
            <Fom data={[{label: '姓名', name: 'name'}, {label: '到期日期', type: 'range', name: 'date'}]}/>
        </Content>
        <Footer style={CSS.footer}>
            <FooterTab>
                <Button block danger style={CSS.btn}>
                    <Text style={CSS.btnText}>重置</Text>
                </Button>
            </FooterTab>
            <FooterTab>
                <Button block default style={CSS.btn}
                        onPress={() => {
                            self.props.toggle(true)
                        }}
                >
                    <Text style={CSS.btnText}>完成</Text>
                </Button>
            </FooterTab>
        </Footer>
    </Container>
};
/**
 * 驾驶司机
 */
export default class Driver extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            open: false,
            loading: true,
            noData: false,
            filterData: {},
            total: 0,
            form: [
                {label: '关键字', name: 'name', formItemType: 'inline'},
                {label: '到期开始日期', type: 'date', name: 'start'},
                {label: '到期截止日期', type: 'date', name: 'end'}
            ]
        };
        this.toggleOpenClose = this.toggleOpenClose.bind(this);
        this.ControlPanel = this.ControlPanel.bind(this);
    }

    componentDidMount() {
        const self = this;
    }


    toggleOpenClose(flag, filterData) {
        const self = this;
        self.setState({open: flag, filterData: filterData});
    }

    ControlPanel(props) {
        const self = this;
        console.log('height=' + height);
        var data = self.state.form;
        return <Container style={CSS.controlPanel}>
            <Header style={CSS.header}>
                <Body>
                <Title>查询</Title>
                </Body>
            </Header>
            <Content>
                <Fom
                    ref="fom"
                    data={data}></Fom>
            </Content>
            <Footer style={CSS.footer}>
                <FooterTab>
                    <Button block danger style={CSS.btn}>
                        <Text style={CSS.btnText}>重置</Text>
                    </Button>
                </FooterTab>
                <FooterTab>
                    <Button block default style={CSS.btn}
                            onPress={() => {
                                var formData = self.refs.fom.state;
                                self.toggleOpenClose(false, formData)
                            }}
                    >
                        <Text style={CSS.btnText}>完成</Text>
                    </Button>
                </FooterTab>
            </Footer>
        </Container>
    }

    render() {
        const self = this;
        let {data} = this.state;
        return <Drawer
            type="overlay"
            content={self.ControlPanel()}
            tapToClose={true}
            open={self.state.open}
            side="right"
            openDrawerOffset={0.2} // 20% gap on the right side of drawer
            panCloseMask={0.2}
            closedDrawerOffset={-3}
            styles={drawerStyles}
            tweenHandler={(ratio) => ({
                main: {opacity: (2 - ratio) / 2}
            })}
        >
            <Container>
                <Header style={CSS.header}>
                    <Left>
                        <Feather
                            style={CSS.headerIcon}
                            name="chevron-left"
                            size={24}
                            onPress={() => this.props.navigation.navigate('Home')}
                        />
                    </Left>
                    <Body>
                    <Text style={CSS.headerText}>驾驶证({self.state.total})</Text>
                    </Body>
                    <Right>
                        <Feather
                            style={CSS.filter}
                            onPress={() => self.setState({
                                open: true,
                                form: setFormData(self.state.form, self.state.filterData)
                            })}
                            name="filter"
                            size={24}/>
                    </Right>
                </Header>
                <Content>
                    <ListView
                        setSum={(res) => {
                            self.setState({
                                total: res.total
                            })
                        }}
                        url="/wx/driver/query"
                        filter={self.state.filterData }
                        renderItem={(item, index) => { // 列表项元素渲染
                            return <ListItem
                                style={{paddingTop: 2}}
                                onPress={() => {
                                    var operators = ['打电话', '修改', '删除', '取消'];
                                    auctionSheet('操作', operators, '', (index) => {
                                        if (index == 1) { // 修改
                                            self.props.navigation.navigate('Store', {id: item.id})
                                        } else if (index == 0) { // 打电话
                                            let url = 'tel: ' + item.phone;
                                            Linking.canOpenURL(url).then(supported => {
                                                if (!supported) {
                                                    console.log('Can\'t handle url: ' + url);
                                                } else {
                                                    return Linking.openURL(url);
                                                }
                                            }).catch(err => console.error('An error occurred', err));
                                        } else if (index == 2) { // 删除
                                            post('/wx/driver/delete/' + item.id, {})
                                                .then(res => {
                                                    if (res.code == 0) {
                                                        // self.setState({
                                                        //     data: [...data.slice(0, index), ...data.slice(index + 1)]
                                                        // })
                                                        fnSuccess('删除成功');
                                                    } else {
                                                        fnFail('删除失败！');
                                                    }
                                                })
                                        }
                                    }, 2);
                                }}
                                avatar
                                key={index + 1}
                            >
                                <Left>
                                    <Thumbnail
                                        small
                                        source={{uri: 'https://s1.ax2x.com/2018/02/20/P4ORa.jpg'}}/>
                                </Left>
                                <Body>
                                <Text>{item.name}</Text>
                                <Text
                                    note>{item.phone}</Text>
                                </Body>
                                <Right>
                                    <Text
                                        note>{(item.validTime)}</Text>
                                </Right>
                            </ListItem>
                        }}/>

                </Content>
            </Container>
        </Drawer>
    }
};

const CSS = StyleSheet.create({

    header: {paddingTop: 30, borderBottomWidth: StyleSheet.hairlineWidth,},
    headerText: {fontSize: 20},
    headerIcon: {alignItems: 'flex-start', flex: 1},
    filter: {},
    btn: {borderWidth: 0, margin: 0, borderRadius: 0},
    btnText: {color: '#FFF', margin: 0},
    footer: {borderWidth: 0, paddingTop: 0, backgroundColor: '#333'},
    search: {fontSize: 16},
    controlPanel: {backgroundColor: '#fefefe', height: height}
});
